import { spawn } from 'cross-spawn';
<template>
    <div class="appliDelay">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
            <span>延期申请</span>
            <i class="iconfont iconzuojiantou" style="color: white;"></i>
        </div>
        <div class="content">
            <h3>延期原因:</h3>
            <textarea placeholder="请输入延期原因" v-model="value"></textarea>
        </div>
        <div class="appliTime">
            <h3 @click="showTimeModel">延期至: <span>{{newTime}}</span> </h3>
            <div v-show="showTime">
                <van-datetime-picker
                v-model="currentDate"
                type="date"
                :min-date="minDate"
                @confirm="confirm"
                @cancel="cancel"
                @change="change"
                />

            </div>
        </div>
        <div class="tip">注意：延期后最终所得的奖励将会减少{{RatesConverted}}</div>
        <div class="submitBtn" @click="appliyTask">
            确认提交
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name:"appliDelay",
    data (){
        return {
            currentDate: new Date(),
            minDate: new Date(),
            showTime:false,
            newTime:'请选择延期时间',
            value:'',
            Rates:"",
            finishTime:"",
        }
    },
    computed: {
        RatesConverted(){
            return this.Rates + "%";
        }
    },
    mounted() {
        this.finishTime = this.$route.query.finishTime
         // console.log(this.finishTime)
        this.AppRates();
    },
    methods:{
        onClickLeft() {
            this.$router.go(-1);
        },
        showTimeModel (){
            this.showTime=true
        },
        cancel (){
            //  console.log("取消了")
            this.showTime=false
        },
        confirm (){
            //  console.log("确定")
            this.showTime=false
        },
        change (e,index,value,values){
            this.newTime=e.getValues().join("-")
               // console.log("改变")
        },
        //延期申请
        appliyTask (){
            // console.log("this.newTime",this.newTime)
            var time1 = new Date(this.newTime).getTime();
            var time2 = new Date(this.finishTime).getTime();
            if(this.newTime == ""){
                Toast("请选择延期时间");
                return false;
            }
            else if(time1 > time2){
                this.$axios.post('/user/mytask/edit',{
                    id:this.$route.query.id,
                    applyType: this.$route.query.applyType,
                    delayReason:this.value,
                    delayto:this.newTime
                }).then(res =>{
                     // console.log(res)
                    if(res.data.code==0){
                        Toast(res.data.msg)
                        this.$router.push('/task')
                    }else{
                        Toast(res.data.msg)
                    }
                })
            }
            else{
                Toast("请选择正确的延期时间")
            }
        },
        AppRates(){
            this.$axios.post("/renew/list",{
            }).then(res =>{
                //   console.log(res);
                this.Rates = res.data.rows[0].postponeRenew;
            })
        },
    }
  }
</script>

<style lang="less" scoped>
.appliDelay{
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 0;
    .title {
        width: 100%;
        font-size: 0.36rem;
        color: #333;
        height: 1.25rem;
        line-height: 1.25rem;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
    }
    .content{
        padding:0.2rem 0.3rem 0.3rem;
        box-sizing: border-box;
        background-color: #fff;
        font-size: 0.26rem;
        color:#666;
        margin-top:0.1rem;
        textarea{
            padding:0.2rem;
            box-sizing: border-box;
            width: 100%;
            height: 3.74rem;
            font-size: 0.24rem;
            color:#999;
            margin-top:0.2rem;
            border: 1px solid #D9D9D9;
            resize:none
        }
    }
    .appliTime{
        font-size: 0.28rem;
        color:#666;
        padding:0.3rem;
        box-sizing: border-box;
        background-color: #fff;
        h3{
            margin-bottom: 0.2rem;
        }
    }
    .tip{
        font-size: 0.2rem;
        color:#999999;
        padding-left:0.3rem;
        box-sizing: border-box;
        margin-top:0.2rem;
    }
    .submitBtn{
        width:6.82rem;
        height:.92rem;
        background:rgba(56,168,63,1);
        border-radius:.46rem;
        line-height: 0.92rem;
        color:#fff;
        border-radius: 0.46rem;
        margin:0 auto;
        text-align: center;
        margin-top:1.05rem;
        font-size: 0.32rem;
    }
}

</style>
